<template>
  <div class="layout-container">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <TopNavbar @toggle-sidebar="toggleSidebar" :is-collapse="appStore.sidebar.opened" />
    </el-header>
    
    <div class="main-container">
      <!-- 侧边栏 -->
      <el-aside :width="appStore.sidebar.opened ? '200px' : '64px'" class="sidebar">
        <Sidebar />
      </el-aside>
      
      <!-- 主内容区域 -->
      <el-main class="main-content">
        <router-view />
      </el-main>
    </div>
  </div>
</template>

<script>
import { useAppStore } from '../stores/app'
import TopNavbar from '../components/TopNavbar.vue'
import Sidebar from '../components/Sidebar.vue'

export default {
  name: 'Layout',
  components: {
    TopNavbar,
    Sidebar
  },
  setup() {
    const appStore = useAppStore()
    
    const toggleSidebar = () => {
      appStore.toggleSidebar()
    }
    
    return {
      appStore,
      toggleSidebar
    }
  }
}
</script>

<style scoped>
.layout-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  z-index: 1000;
  background-color: var(--el-bg-color);
}

.main-container {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.sidebar {
  box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
  overflow-y: auto;
  transition: width 0.3s ease;
  background-color: var(--el-bg-color);
}

.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background-color: var(--el-bg-color-page);
}

/* 暗色主题下的样式 */
html.dark .header {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

html.dark .sidebar {
  box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.2);
}
</style>